<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>意见反馈</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <!-- unpkg的CDN: -->
    <link rel="stylesheet" href="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.css">
    <!-- jsdelivr的CDN: -->
    <script src="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background: #F6F6F6;
        }

        .container {
            background: #F6F6F6;
        }

        .head {
            font-size: 1rem;
            position: relative;
            background: #fff;
            margin-bottom: 5px;
            padding: 5px 0px;
        }

        .cart {
            background: #fff;
            border-bottom: 1px solid #ddd;
        }

        .cart .tit {
            padding-top: 8px;
        }

        .cart .other {
            text-align: right;
            color: #888;
            padding-bottom: 8px;
        }

        .tool {
            position: absolute;
            bottom: 90px;
            right: 24px;
        }

        .my-icon-tianjia:before {
            content: "\e609";
            font-size: 2rem;
            color: #2270ea;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="head">
            反馈列表
        </div>
        <div class="main">
            <div id="mescroll" class="mescroll">
                <ul id="newsList" class="news-list">
                    <li id="1" class="cart">

                        <p class="tit">三打三防似懂非懂上方</p>
                        <p class="other">2020-05-20 16:05</p>

                    </li>
                    <li id="1" class="cart">

                        <p class="tit">三打三防似懂非懂上方</p>
                        <p class="other">2020-05-20 16:05</p>

                    </li>
                    <li id="1" class="cart">

                        <p class="tit">三打三防似懂非懂上方</p>
                        <p class="other">2020-05-20 16:05</p>

                    </li>

                </ul>
            </div>
        </div>
        <div class="tool">
            <div id="add">
                <i class="iconfont my-icon-tianjia"></i>
            </div>
        </div>

    </div>
</body>
<script>
    $(function () {

        var page = 0; // 当前页下标
        // 创建mescroll对象
        var mescroll = new MeScroll('mescroll', { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
            up: {
                callback: getListData, //上拉加载的回调
                //以下是一些常用的配置,当然不写也可以的.
                page: {
                    num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    size: 5 //每页数据条数,默认10
                }

            },
            down: {
                auto: false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
                callback: downCallback //下拉刷新的回调
            },

        })
        /*下拉刷新的回调 */
        function downCallback() {
            page = 0;
            getListDataFromNet(page.num,
                function (curPageData) { // 成功回调
                    console.log('success');
                    curPageData = curPageData || [];
                    setListData(curPageData, true); // 设置列表数据
                    mescroll.endSuccess(curPageData.length) // 关闭加载动画
                },
                function (err) { // 失败回调
                    console.log('end');
                    mescroll.endErr()
                });
        }

        function getListData(page) { //上拉加载的回调
            /**
             *  getListDataFromNet 获取数据
             * @param {Number} pageNum:当前页
             * @param {function} successCallback:成功回调
             * @param {function} errorCallback:失败回调
             *
             */
            console.log('callback')
            getListDataFromNet(page.num,
                function (curPageData) { // 成功回调
                    console.log('success');
                    curPageData = curPageData || [];
                    setListData(curPageData); // 设置列表数据
                    mescroll.endSuccess(curPageData.length) // 关闭加载动画
                },
                function (err) { // 失败回调
                    console.log('end');
                    mescroll.endErr()
                });
        }

        /*设置列表数据*/
        function setListData(curPageData, isAppend) {
            var listDom = document.getElementById("newsList");
            if (isAppend) {
                listDom.innerHTML = ''; // 清空
            }
            for (var i = 0; i < curPageData.length; i++) {
                var n = curPageData[i];
                var str = '';
                str += `<p class="tit">三打三防似懂非懂上方</p>
                        <p class="other">2020-05-20 16:05</p>`;
                var liDom = document.createElement("li");
                liDom.innerHTML = str;
                listDom.appendChild(liDom);//加在列表的后面,上拉加载
            }
        }

        function getListDataFromNet(pageNum, successCallback, errorCallback) { // 请求后台接口，获取数据
            $.ajax({
                url: "",
                type: 'GET',
                data: {
                    page: page
                },
                success: function (res) {
                    page++;
                    console.log('success: ', res)
                    // if (res.data.current_page === res.data.last_page) {
                    //     return}
                    successCallback && successCallback(res.data.data)
                },
                fail: function (err) {
                    console.log('fail')
                    errorCallback && errorCallback(err);
                }
            })
        }

        // mescroll end
    })
    $('#newsList').on('click', '.cart', function () {

        location.href = "http://www.baidu.com" + '?id=' + this.id;
    })
    $('#add').on('click', function () {

        location.href = "http://www.baidu.com"
    }) 
</script>

</html>